<!--设置密码页面-->
<template>
  <div class="setPwdContainer">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <div class="content">
      <div class="loginp">
        <input v-model="userpwd" placeholder="请输入新密码" class="userinput" :type="pwdType" />
        <img class="useryzm" :src="openeye" @click="changeType()" />
      </div>
      <div class="loginp loginp1">
        <input v-model="reuserpwd" placeholder="请确认新密码" class="userinput" :type="repwdType" />
        <img class="useryzm" :src="reopeneye" @click="changeType1()" />
      </div>
      <button @click="setPwdbut" class="loginbut">确定</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex"; //先导入vuex的方法
import CommonBar from "../common/commonBar";
export default {
  components: {
    CommonBar
  },
  data() {
    return {
      options: {
        centerText: "重置密码",
        lefttype: "left"
      },
      userpwd: "",
      reuserpwd: "",
      yzmcode: "",
      pwdType: "password", // 密码类型
      repwdType: "password",
      reopeneye: require("../../../static/image/nopwd.png"),
      openeye: require("../../../static/image/nopwd.png"), //图片地址
      username: "",
      userphone: ""
    };
  },
  // computed: {
  //   ...mapState({
  //     userphone: state => state.AuthorizationPhone,
  //     username: state => state.AuthorizationUsername
  //   })
  // },
  created() {
    this.username = this.$route.query.username;
    this.userphone = this.$route.query.userphone;
    this.yzmcode = this.$route.query.yzmcode;
    console.log(this.username, this.userphone, this.yzmcode);
  },
  methods: {
    //修改密码显示
    changeType() {
      this.pwdType = this.pwdType === "password" ? "text" : "password";
      this.openeye =
        this.openeye == require("../../../static/image/nopwd.png")
          ? require("../../../static/image/viewpwd.png")
          : require("../../../static/image/nopwd.png");
    },
    changeType1() {
      this.repwdType = this.repwdType === "password" ? "text" : "password";
      this.reopeneye =
        this.reopeneye == require("../../../static/image/nopwd.png")
          ? require("../../../static/image/viewpwd.png")
          : require("../../../static/image/nopwd.png");
    },
    //对全局的方法login进行监控
    ...mapMutations(["changePassword", "changeremberpwdchecked", "logout"]),
    setPwdbut() {
      this.yzmcode = this.$route.query.yzmcode;

      if (this.userpwd == this.reuserpwd) {
        this.params = {
          phone: this.userphone,
          username: this.username,
          password: this.userpwd,
          code: this.yzmcode
        };
        this.$toast.loading({
          mask: true,
          message: "加载中...",
          duration: 5000
        });
        this.$http
          .get(`${this.$basePath}?service=App.Account.ForgetPassword`, {
            params: this.params
          })

          .then(res => {
            if (res.ret == 200) {
              this.$toast.clear();
              this.$toast({ message: res.msg });
              // console.log("修改密码", res);
              // 将用户token保存到vuex中
              this.changePassword({
                AuthorizationPassword: this.params.password
              });
              this.changeremberpwdchecked({
                remberpwdchecked: false
              });
              this.logout();
              this.$router.push({
                //核心语句
                path: "/login" //跳转的路径
              });
            } else if (res.ret == 201) {
              this.$toast({ message: res.msg });
            } else {
              this.$toast({ message: res.msg });
            }
          });
      } else {
        this.$toast({ message: "两次密码不一致" });
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/login.less";
</style>